<template>
  <div>
      <div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到美多商城!</div>
			<div class="fr">
				<div class="login_info fl" v-if="username">
					欢迎您：<em>{{username}}</em>
					<a href="javascript:;" class="quit">退出</a>
				</div>
				<div class="login_btn fl" v-else>
					<a href="/login">登录</a>
					<span>|</span>
					<a href="/register">注册</a>
				</div>
				<div class="user_link fl">
					<span>|</span>
					<a href="user_center_info.html">用户中心</a>
					<span>|</span>
					<a href="/cart">我的购物车</a>
					<span>|</span>
					<a href="user_center_order.html">我的订单</a>
				</div>
			</div>
		</div>		
	</div>

	<div class="search_bar clearfix" v-show="search">
		<a href="index.html" class="logo fl"><img src="/static/images/logo.png"></a>
		<div class="search_wrap fl">
			<div class="search_con">
				<input type="text" class="input_text fl" name="" placeholder="搜索商品">
				<input type="button" class="input_btn fr" name="" value="搜索">
			</div>
			<ul class="search_suggest fl">
				<li><a href="#">索尼微单</a></li>
				<li><a href="#">优惠15元</a></li>
				<li><a href="#">美妆个护</a></li>
				<li><a href="#">买2免1</a></li>
			</ul>
		</div>	
		
		<div class="guest_cart fr">
			<a href="#" class="cart_name fl">我的购物车</a>
			<div class="goods_count fl" id="show_count">{{total_count}}</div>

			<ul class="cart_goods_show">
				<li v-for="cart in carts" :key="cart.id">
					<img :src="'http://127.0.0.1:8000/'+cart.goods.pic" alt="商品图片">
					<h4>{{cart.goods.name}}</h4>
					<div>{{cart.num}}</div>
				</li>
			</ul>			
		</div>
	</div>
  </div>
</template>

<script>
export default {
	props:["search"],
    data(){
        return {
			username:sessionStorage.getItem("username"),
			carts:[],
			total_count:0,
        }
	},
	mounted(){
		//去查询 用户的购物车信息
		const token=sessionStorage.getItem("token")

        if(token){
           
            this.axios.get("/carts",{"headers":{"Authorization":token}}).then(resp=>{
            	console.log(resp.data)
				this.carts=resp.data

				for(let i=0;i<this.carts.length;i++){
					this.total_count+=this.carts[i].num
				}

			}).catch(error=>{
				console.log(error)
			})
        }

        
    },

}
</script>

<style>

</style>